<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
    <title>榜单日排行</title>
    <script src="https://cdn.bootcss.com/babel-polyfill/7.4.4/polyfill.js"></script>
    <script src="${ctx}/js/jquery1.8.2.min.js"></script>
    <script src="${ctx}/js/vue.min.js"></script>
    <link rel="stylesheet" href="${ctx}/css/reset.css">
    <script src="${ctx}/js/changeSize.js"></script>
    <script src="${ctx}/layui/layui.all.js"></script>
    <link rel="stylesheet" href="${ctx}/layui/css/layui.mobile.css">
</head>
<style>
    [v-cloak] {
        display: none;
    }
    .day_rank {
        width: 100%;
        padding-bottom: 3.8rem;
        background-color: #F06865;
    }

    .bg{
        position: absolute;
        left: 0;
        right: 0;
    }
    .bg img{
        width: 100%;
    }
    .detail {
        position: relative;
        z-index: 1;
    }
    .page_title {
        /*padding: 0.5rem 0;*/
        padding-top:1rem;
        color: #fff;
        font-size: 1.12rem;
        text-align: center;
    }
    .page_title div{
        width: 100%;
        position: relative;
        height: 2.2rem;
    }
    .page_title span{
        position: absolute;
        top: 0;
        right: 0.5rem;
        line-height: 2.2rem;
        font-size: 0.88rem;
    }
    .page_title p{
        line-height: 2.2rem;
    }

    .go_back{
        width: 1rem;
        height: 1rem;
        position: absolute;
        left: 0.5rem;
        top: 50%;
        margin-top: -0.5rem;
    }
    .set_header {
        background:linear-gradient(to bottom right,#E1514E,#F06865);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }

    .time {
        text-align: center;
        margin-top: 6rem;
        height: 1.2rem;
        padding-bottom:1.5rem;
    }
    .time span{
        display: inline-block;
        padding: 0 0.75rem;
        border-radius: 0.55rem;
        text-align: center;
        color: #fff;
        background: #FB9391;
        line-height: 1.2rem;
        font-size: 0.75rem;
    }
    .rank_box{
        margin: 0 auto;
        padding: 0 0.5rem;
        position: relative;
    }

    .list_box {
        background: #fff;
        border-radius: 0.2rem;
        padding-top: 0.4rem;
    }

    .bottom_bg {
        position: absolute;
        z-index: 1;
        left:0;
        right: 0;
        bottom: -0.4rem;
    }
    .bottom_bg img{
        width: 100%;
    }
    .rank_item {
        position: relative;
        display: inline-block;
    }
    .rank_item:first-child {
        width: 100%;
        height:6.25rem;
        background: url("${ctx}/image/rank/list21.png")no-repeat;
        background-size: 100% auto;
        margin-bottom: 0.5rem;
    }

    .rank_item:nth-child(2) {
        width:54%;
        background: url("${ctx}/image/rank/list22.png")no-repeat;
        background-size: 100% 100%;
    }

    .rank_item:nth-child(3) {
        width:44%;
        background: url("${ctx}/image/rank/list23.png")no-repeat;
        background-size: 100% 100%;
    }

    .week_item:first-child {
        background: url("${ctx}/image/rank/list1.png")no-repeat;
        background-size: 100% auto;
    }
    .week_item:nth-child(2) {
        background: url("${ctx}/image/rank/list2.png")no-repeat;
        background-size: 100% 100%;
    }

    .week_item:nth-child(3) {
        background: url("${ctx}/image/rank/list3.png")no-repeat;
        background-size: 100% 100%;
    }

    .rank_item:nth-child(n+2) {
        height:5.5rem;
    }
    .rank_item:nth-child(n+2) div{
        bottom: 1.2rem;
    }


    .rank_item div {
        position: absolute;
        left: 0.7rem;
        right: 0.8rem;
        bottom: 0.5rem;
        padding:0.1rem 0.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .rank_item:nth-child(1) div p{
        width: auto;
    }
    .rank_item img{
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 100%;
        margin-right: 0.3rem;
    }
    .rank_item p{
        display: block;
        width:calc(100% - 1.5rem);
        height: 0.8rem;
        line-height: 0.8rem;
        color: #fffc;
        font-size: 0.5rem;
        overflow: hidden;
    }

    .rank_item p span{
        color: #fffc!important;
    }

    .rank_item:nth-child(n+2) span{
        line-height: 0.8rem;
        display: inline-block;
        white-space: nowrap;
        animation: 20s wordsLoop linear infinite normal;
    }

    @-webkit-keyframes wordsLoop {
        0% {
            transform: translateX(0);
            -webkit-transform: translateX(0);
        }
        100% {
            transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
        }
    }

    .rank_person {
        display: flex;
    }
    .rank_person div{
        flex: 1;
    }
    .rank_person img{
        width: 100%;
    }


    .sort {
        margin-top: 1rem;
        padding:0 0.5rem;
    }
    .sort .title {
        text-align: center;
        margin-bottom: 0.5rem;
    }
    .sort .title img{
        width: 64%;
    }
    .sort_box {
        background: #fff;
        border-radius: 0.2rem;
        padding: 1.5rem 0.5rem 0.4rem 0.5rem;
        font-size: 0.78rem;
    }
    .table_header {
        display:flex;
        font-size: 0.7rem;
    }
    .table_header span{
        color: #999999;
        display: inline-block;
        text-align: center;
    }
    .percent_one{
        width: 14%!important;
    }
    .percent_three{
        width: 31%!important;
    }
    .percent_two{
        width: 24%!important;
    }
    .table_body {
        margin-top: 0.5rem;
        font-size: 0.75rem;
    }
    .table_line{
        display: flex;
        padding: 0.6rem 0;
        align-items: center;
        position: relative;
        border-bottom: 1px solid #f2f2f2;
    }

    .myself{
        padding: 0.9rem 0;
    }

    .sort_index {
        color: #999;
    }
    .table_line .avatar{
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 2px;
    }
    .person_record {
        background: #FCEFD2
    }

    .table_item {
        box-sizing: border-box;
        text-align: center;
        padding: 0 0.2rem;
    }
    .message {
        font-size:0.5rem;
        color: orange;
        position: absolute;
        right: 0.2rem;
        bottom: 0.2rem;
    }
    .normal{
        color: #333333
    }
    .reward {
        color: #F06865;
    }
    .total {
        color: #333;
        background: #FCEFD2
    }
    .earn p {
        font-size: 0.63rem;
    }
    .earn p:first-child{
        padding-bottom: 0.3rem;
    }
    .earn p:last-child{
        font-size: 0.5rem;
        margin-top: 0.2rem;
    }
    .add_more {
        border-radius: 0.6rem;
        width: 5rem;
        margin: 0.5rem auto;
        text-align: center;
        line-height: 1.2rem;
        border: 1px solid rgba(153, 153, 153, 0.5);
        color: #333;
        font-size: 0.75rem;
    }
    .no_more {
        text-align: center;
        color: #bbb;
        font-size: 0.63rem;
        line-height: 1rem;
        padding: 0.8rem 0;
    }
    .rule_box {
        margin-top: 1.5rem;
        padding: 0 0.5rem;
    }
    .rule_box .title{
        text-align: center;
        margin-bottom: 0.5rem;
    }
    .rule_box .title img{
        width: 50%;
    }
    .rule_detail {
        padding-bottom: 0.2rem;
    }
    .rule{
        font-size:0.75rem ;
        padding:0 0.5rem;
        margin-bottom: 1rem;
    }
    .rule .rule_name{
        display: block;
        margin-top: 0.2rem;
        background: url("${ctx}/image/rank/btn_bg.png")no-repeat;
        background-size:100% auto ;
        width: 4.5rem;
        height: 2rem;
        line-height: 1.8rem;
        box-sizing: border-box;
        padding-left: 0.9rem;
        color: #fff;
    }

    .rule div{
        padding:0 0.9rem;
    }

    .rule div p{
        line-height: 1.2rem;
        text-align: justify;
    }

    .bottom_btn {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2rem;
        background:#F06865 ;
        padding:0.5rem;
        z-index: 10;
    }
    .bottom_btn span{
        display: block;
        width:100%;
        background: linear-gradient(226deg,rgba(255,197,33,1) 0%,rgba(255,174,28,1) 100%);
        border-radius:1.2rem;
        color: #fff;
        text-align: center;
        font-size: 1.12rem;
        height: 2rem;
        line-height: 2rem;
    }
    .suspension{
        position: fixed;
        z-index: 10;
    }

    .change_btn {
        right: 0.5rem;
        bottom: 5rem;
    }
    .change_btn img{
        width:4rem ;
    }
    .count_down {
        right: 0;
        bottom: 11rem;
        width: 5.5rem;
    }
    .count_down div{
        position: relative;
    }
    .count_down img{
        width: 100%;
    }
    .count {
        position: absolute;
        bottom: 1.55rem;
        left: 0;
        right: 0;
        color: #fffc;
        text-align: center;
        font-size: 0.55rem;
    }
</style>
<body>
<div id="app">
    <div class="day_rank" v-cloak>
        <div  class="bg">
            <img src="${ctx}/image/rank/bg1.png">
        </div>
        <div class="detail">
            <div class="page_title" id="title" :class="{'set_header':isChange}">
               <div>
                   <img class="go_back" src="../../static/image/zuo_white.png">
                   <p>榜单冲刺</p>
                   <span @click="getRule()">榜单攻略</span>
               </div>
            </div>
            <div class="time">
                <span v-if="activityTime">活动时间：{{activityTime}}</span>
            </div>
            <div class="rank_box">
                <div class="list_box">
                    <div class="rank_item" :class="{'week_item':typeIndex===1}">
                        <div v-if="rankList.length!=0">
                            <p>
                                <span>{{rankList[0].name}}获得了第一名，拿到{{rankList[0].money?rankList[0].money/100:0}}元奖励</span>
                            </p>
                        </div>
                    </div>
                    <div class="rank_item" :class="{'week_item':typeIndex===1}">
                        <div  v-if="rankList.length>1">
                            <p>
                                <span>{{rankList[1].name}}获得了第二名，拿到{{rankList[1].money?rankList[1].money/100:0}}元奖励</span>
                            </p>
                        </div>
                    </div>
                    <div class="rank_item" :class="{'week_item':typeIndex===1}">
                        <div v-if="rankList.length>2">
                            <p>
                                <span>{{rankList[2].name}}获得了第三名，拿到{{rankList[2].money?rankList[2].money/100:0}}元奖励</span>
                            </p>
                        </div>
                    </div>
                    <div class="rank_person">
                        <div>
                            <img src="${ctx}/image/rank/rank1.png" v-if="typeIndex===0">
                            <img src="${ctx}/image/rank/rank21.png" v-else>
                        </div>
                        <div>
                            <img src="${ctx}/image/rank/rank2.png" v-if="typeIndex===0">
                            <img src="${ctx}/image/rank/rank22.png" v-else>
                        </div>
                        <div>
                            <img src="${ctx}/image/rank/rank3.png" v-if="typeIndex===0">
                            <img src="${ctx}/image/rank/rank23.png" v-else>
                        </div>
                    </div>
                </div>
                <div class="bottom_bg">
                    <img src="${ctx}/image/rank/bottom.png">
                </div>
            </div>
            <div class="sort">
                <p class="title">
                <#-- 日榜 -->
                    <img src="${ctx}/image/rank/title.png" v-if="typeIndex==0">
                <#-- 周榜 -->
                    <img src="${ctx}/image/rank/title_week.png" v-else>
                </p>
                <div class="sort_box">
                    <div class="table_header">
                        <span class="percent_one">排名</span>
                        <span class="percent_three">昵称</span>
                        <span class="percent_two">排名奖励(元)</span>
                        <span class="percent_three">累计赚取(元)</span>
                    </div>
                    <div class="table_body">
                        <#-- 未上榜用户 -->
                        <div class="total table_line" v-if="myInfo&&(myInfo.sort>maxData||myInfo.sort=='100+')">
                            <div class="table_item percent_one">{{myInfo.sort}}</div>
                            <div class="table_item percent_three">{{myInfo.name}}</div>
                            <div class="table_item percent_two">{{myInfo.money?myInfo.money/100:'—'}}</div>
                            <div class="table_item percent_three earn">
                                <p>{{myInfo.score?myInfo.score/100:0}}元</p>
                                <p class="message">{{myInfo.msg}}</p>
                            </div>
                        </div>
                        <#-- 上榜用户 -->
                        <div class="table_line" :class="{'person_record myself':myInfo.sort==item.sort}" v-for="(item,index) in rankList">
                            <div class="table_item percent_one">
                                <i class="sort_index" v-if="index>2">{{index+1}}</i>
                                <div v-else>
                                    <img src="${ctx}/image/rank/first.png" v-if="index===0">
                                    <img src="${ctx}/image/rank/second.png" v-if="index===1">
                                    <img src="${ctx}/image/rank/third.png" v-if="index===2">
                                </div>
                            </div>
                            <div class="table_item percent_three">
                                <span class="normal">{{item.name}}</span>
                            </div>
                            <div class="table_item percent_two">
                                <span class="reward">{{item.money|score}}</span>
                            </div>
                            <div class="table_item percent_three earn">
                                <span class="normal">{{item.score?item.score/100:0}}元</span>
                                <p v-if="item.sort<maxData&&item.sort==myInfo.sort&&myInfo.score!=0" class="message">{{myInfo.msg}}</p>
                            </div>
                        </div>
                        <div class="add_more" @click="addMore()" v-if="hasMore">查看更多</div>
                        <div class="no_more" @click="addMore()" v-else>没有排名啦~</div>
                    </div>
                </div>
            </div>
            <div class="rule_box">
                <p class="title">
                    <img src="${ctx}/image/rank/rule.png">
                </p>
                <div class="list_box rule_detail">
                    <div class="rule">
                        <span class="rule_name">活动时间</span>
                        <div>{{startDay}} ~ {{endDay}}</div>
                    </div>
                    <div class="rule">
                        <span class="rule_name">活动范围</span>
                        <div>
                            <p>活动期间完成[${appname}]内任意类型任务{{typeIndex===1?'(新手任务除外)':''}}</p>
                        </div>
                    </div>
                    <div class="rule">
                        <span class="rule_name">奖励说明</span>
                        <div>
                            <p>·在活动时间内，完成任意任务{{typeIndex===1?'(新手任务除外)':''}}累计赚取金额完成排名，排名前20名的用户可以获得对应奖励(排名越前奖励越高，奖励不叠加)</p>
                            <p>·累计赚取金额=做任务所获得的的所有红包奖励金额</p>
                        </div>
                    </div>
                    <div class="rule">
                        <span class="rule_name">领取方式</span>
                        <div>活动结束后登录榜单页领取</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom_btn" @click="getTask()">
            <span>一键抢榜赢{{typeIndex===0?'30元':'300元'}}</span>
        </div>
        <#--日周榜切换按钮-->
        <div class="change_btn suspension">
            <img src="${ctx}/image/rank/week.png" @click="changeType(1)" v-if="typeIndex===0">
            <img src="${ctx}/image/rank/day.png" @click="changeType(0)" v-if="typeIndex===1">
        </div>
        <div class="count_down suspension">
            <#-- 奖励 -->
            <div v-if="userInfo&&userInfo.createTime" @click="receivePrize()">
                <img src="${ctx}/image/rank/clock.png">
                <div class="count">
                    <p>榜单奖励</p>
                    <p>明日{{deadline}}过期</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            rankList: [],
            typeIndex:0,
            startDay:'',
            endDay:'',
            score:0,
            getting: false,
            get_time:86400,
            activityTime: '',
            myInfo:{},
            current:1,
            userInfo:{},
            deadline:'',
            money:'',
            maxData:0,
            hasMore:true,
            isChange:false
        },
        created: function () {
            // window.addEventListener('scroll', this.onScroll)
            var dates = this.getCurrentTime(new Date()).split(' ');
            if (this.typeIndex ==0) {
                this.startDay = dates[0]+'  00:00';
                this.endDay = dates[0]+'  23:59';
            }
        },


        mounted: function () {
            this.getRank(1);
            // 设置标题栏距离顶部距离
            // var height = window.xy_web.getStatusBarHeight();
            // $('#title').css('padding-top',height/32+'rem');
        },
        methods: {
            // 获取列表信息
            getRank: function (val) {
                var that = this;
                $.ajax({
                    url: '/ranking/day',
                    type: 'post',
                    data: {page:val,t:that.typeIndex===0?0:1,pass:'123'},
                    async: false,
                    headers:{"appStore":"test","appid":"xianyu","brand":"test","imei":"863254030974322","lat":"","lng":"","macAddr":"C4:0B:CB:F2:C7:18","os":"Othernull","osv":"MI 6","sign":"7e058d5d632eaf9e75de4a687f12fdfd","time":"1565253309935","userid":"70e0e71d6045454a84927a1e11439c1a","version":"100"},
                    dataType: "json",
                    success: function (res) {
                        if (res.success) {
                            if (res.data.data) {
                                let list = that.rankList;
                                list ? list = list.concat(res.data.data) : list = res.data.data;
                                that.rankList = list;
                            }
                            that.hasMore = res.data.data&&res.data.data.length!=0;
                            that.startDay = res.data.star;
                            that.endDay = res.data.end;
                            that.maxData = res.data.maxSort?res.data.maxSort:0;
                            that.activityTime = res.data.star&&res.data.end?(res.data.star +'~'+ res.data.end):'';
                            that.score = res.data.myScore;
                            that.myInfo = res.data.my;
                            that.money=res.data.sbcount?parseFloat(res.data.sbcount).toFixed(2):'';
                            that.userInfo = res.data.record;
                            if (that.userInfo) {
                                that.deadline = that.transformTime(new Date(that.userInfo.createTime + 24*60*60*1000))
                            }
                        }

                    },
                    error: function () {

                    }
                });
            },
            // 榜单攻略
            getRule:function(){

            },

            // 抢榜
            getTask: function (){

            },

            scrollToRank:function(e){
                document.documentElement.scrollTop = 500;
                document.body.scrollTop = 500;
            },

            // 返回上一页
            comeback: function () {
                window.history.back(-1);
            },

            // 领取奖励
            receivePrize:function(){
                var that = this;
                $.ajax({
                    url: '/ranking/get/record',
                    type: 'post',
                    data: '',
                    async: false,
                    headers:{"appStore":"test","appid":"xianyu","brand":"test","imei":"863254030974322","lat":"","lng":"","macAddr":"C4:0B:CB:F2:C7:18","os":"Othernull","osv":"MI 6","sign":"7e058d5d632eaf9e75de4a687f12fdfd","time":"1565253309935","userid":"91ea601eb3814402af6731b0138bcffa","version":"100"},
                    dataType: "json",
                    success: function (res) {
                        if (res.success) {
                            layer.msg('领取成功！');
                            this.userInfo = '';
                            this.getRank(1);
                        }else {
                            layer.msg('不好意思，请重新领取！');
                        }
                    },
                    error: function () {
                        layer.msg('不好意思，请重新领取！');

                    }
                });
            },

            onScroll:function(){
                this.isChange = document.documentElement.scrollTop>40;
                // console.log('scroll:',document.documentElement.scrollTop,this.isChange)
            },

            addMore:function(){
                this.current =  this.current+1;
                this.getRank(this.current);
            },

            // 切换周、日榜单
            changeType:function(e){
                this.typeIndex = e;
                this.current = 1;
                this.rankList = [];
                this.getRank(1)
            },

            // 获取当前时间
            getCurrentTime:function(time){
                var dateee = new Date(time).toJSON();
                var date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
                return date
            },


            // 格式化显示时间
            transformTime:function(time){
                var date = this.getCurrentTime(time);
                var d = date.split(' ');
                return d[1]
            },

        }
    });
    Vue.filter('score', function (value) {
        var str;
        if(value){
            str="奖"+value/100+"元";
        }else {
            str="-";
        }
        return str;

    })

</script>
